<template>
  <div class="chart-content">
    <div class="title">人效</div>

    <div class="wrap">
      <CustomChart
        v-if="option.yAxis.data.length"
        class="chart"
        :option="option"
        :defaultZoomPosition="{ yAxis: 'currentMonth' }"
      />
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { getMonthUserEffeciencyData } from "@/api/dashboard/blowIrriagtionSpinLineMonthly";
import { transformEmtyValue } from "@/utils/eam";
export default {
  name: "LeftChart1",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      option: {
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#333CCE", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#478EFF", // 100% 处的颜色
              },
            ],
          },
          "#23B899",
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#DD9C4F", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FF9B47", // 100% 处的颜色
              },
            ],
          },
        ],
        grid: {
          top: 46,
          left: 170,
          bottom: 28,
          right: 100,
        },
        title: {
          text: "",
          left: 20,
          top: 10,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: 500,
            rich: {
              highlight1: {
                color: "#46fbff",
                fontSize: 14,
              },
              highlight2: {
                color: "#ff7d28",
                fontSize: 14,
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            return `${
              params[0].name
            }<br /><i class="tooltip-circle" style="background-color:${
              params[0].color.colorStops[0].color
            };"></i>${params[0].seriesName}：${transformEmtyValue(
              params[0].value,
              "-"
            )}, 占比${this.computedRatio(
              params[0].value,
              params[1].value
            )}%<br /><i class="tooltip-circle" style="background-color:${
              params[1].color
            };"></i>${params[1].seriesName}：${transformEmtyValue(
              params[1].value,
              "-"
            )}, 占比${this.computedRatio(params[1].value, params[0].value)}%`;
          },
        },
        legend: {
          data: [
            {
              name: "内部员工",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "外部员工",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              textStyle: {
                padding: [0, -6],
              },
            },
          ],
          right: 24,
          top: 10,
          // orient: "vertical",
          textStyle: {
            color: "#ffffff",
          },
          itemHeight: 13,
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 4,
            yAxisIndex: 0,
            filterMode: "empty",
          },
          {
            type: "slider",
            startValue: 0,
            endValue: 4,
            right: "4%",
            left: "94.5%",
            yAxisIndex: 0,
            orient: "vertical",
            showDetail: false,
            borderColor: "rgba(167,183,204,0.45)",
            fillerColor: "rgba(167,183,204,0.2)",
            filterMode: "empty",
          },
        ],
        yAxis: {
          type: "category",
          data: [],
          position: "right",
          inverse: true,
          axisLine: {
            lineStyle: {
              color: "#485073",
            },
          },
          axisLabel: {
            interval: 0,
            color: "rgba(255, 255, 255, 0.6)",
          },
          axisTick: {
            show: false,
          },
        },
        xAxis: {
          name: "",
          nameGap: 26,
          inverse: true,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#485073",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.6)",
            fontSize: 11,
            hideOverlap: true,
          },
          axisTick: {
            show: false,
          },
          splitNumber: 5,
          min: 0,
        },
        series: [
          {
            name: "内部员工",
            data: [],
            type: "bar",
            barWidth: 15,
            stack: "renxiao",
            label: {
              show: true,
              position: "inside",
              color: "rgba(255, 255, 255, 0.75)",
              formatter(params) {
                return params.value || "";
              },
            },
          },
          {
            name: "外部员工",
            data: [],
            type: "bar",
            barWidth: 15,
            stack: "renxiao",
            label: {
              show: true,
              position: "inside",
              color: "rgba(255, 255, 255, 0.75)",
              formatter(params) {
                return params.value || "";
              },
            },
            markPoint: {
              data: [],
              symbol: "path://",
              symbolSize: 1,
              symbolOffset: [0, 0],
              label: {
                position: "left",
                color: "rgba(255, 255, 255, 0.75)",
                fontSize: 11,
                formatter(params) {
                  return `人效: {highlight1|${transformEmtyValue(
                    params.value,
                    "-"
                  )}}箱/小时`;
                },
                rich: {
                  highlight1: {
                    color: "#46fbff",
                    fontSize: 11,
                  },
                  highlight2: {
                    color: "#ff7d28",
                    fontSize: 11,
                  },
                },
              },
            },
          },
          {
            name: "非生产工时",
            data: [],
            type: "bar",
            barWidth: 15,
            barGap: "10%",
            stack: "feishengchangongshi",
            label: {
              show: true,
              position: "inside",
              color: "rgba(255, 255, 255, 0.75)",
              formatter(params) {
                return params.value || "";
              },
            },
            tooltip: {
              show: false,
            },
            markPoint: {
              data: [],
              symbol: "path://",
              symbolSize: 1,
              symbolOffset: [0, 0],
              label: {
                position: "left",
                color: "rgba(255, 255, 255, 0.75)",
                fontSize: 11,
                formatter(params) {
                  const values = params.value ? params.value.split("/") : [];
                  return `非生产: {highlight1|${
                    values[0] || "-"
                  }}h，占比{highlight1|${values[1] || "-"}%}`;
                },
                rich: {
                  highlight1: {
                    color: "#46fbff",
                    fontSize: 11,
                  },
                  highlight2: {
                    color: "#ff7d28",
                    fontSize: 11,
                  },
                },
              },
            },
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.lineItem) {
        return;
      }

      try {
        const { lineId } = this.lineItem.properties;
        const params = { lineId };
        const res = await getMonthUserEffeciencyData(params);

        const {
          yearSumMissionHours,
          yearSumMissionRatio,
          yearSumWorkHours,
          monthDatas,
        } = res.data;

        let yAxisData = [];
        let seriesData1 = [];
        let seriesData2 = [];
        let seriesData3 = [];
        let markPointData2 = [];
        let markPointData3 = [];

        monthDatas.forEach((ele) => {
          yAxisData.push({
            value: ele.produceMonth,
            ...ele,
          });
          seriesData1.push(ele.innerWorkHours);
          seriesData2.push(ele.outerWorkHours);
          markPointData2.push({
            coord: [0, ele.produceMonth],
            value: ele.userEfficiency,
          });
          markPointData3.push({
            coord: [0, ele.produceMonth],
            value: `${ele.missionHours || ""}/${ele.missionRatio || ""}`,
          });
          seriesData3.push(ele.missionHours);
        });
        const yAxisMax = this.getyAxisMax(
          seriesData1,
          seriesData2,
          seriesData3
        );

        this.option.title.text = `年累计生产工时 {highlight1|${
          yearSumWorkHours || 0
        }h}，非生产工时 {highlight1|${
          yearSumMissionHours || 0
        }h}，占比 {highlight1|${yearSumMissionRatio || 0}%}`;
        this.option.yAxis.data = yAxisData;
        this.option.xAxis.max = yAxisMax;
        this.option.series[0].data = seriesData1;
        this.option.series[1].data = seriesData2;
        this.option.series[1].markPoint.data = markPointData2.map((ele) => ({
          ...ele,
          coord: [yAxisMax, ele.coord[1]],
        }));
        this.option.series[2].data = seriesData3;
        this.option.series[2].markPoint.data = markPointData3.map((ele) => ({
          ...ele,
          coord: [yAxisMax, ele.coord[1]],
        }));
      } catch (error) {
        this.option.title.text = `年累计生产工时 {highlight1|0}，非生产工时 {highlight1|0}，占比 {highlight1|0%}`;
        this.option.yAxis.data = [];
        this.option.series[0].data = [];
        this.option.series[1].data = [];
        this.option.series[1].markPoint.data = [];
        this.option.series[2].data = [];
        this.option.series[2].markPoint.data = [];
      }
    },
    getyAxisMax(data1, data2, data3) {
      const res = [];
      // data1, data2是堆叠图
      data1.forEach((d, i) => {
        res.push((d || 0) + (data2[i] || 0));
      });

      const maxValue = Math.ceil(Math.max(...res, ...data3));
      const maxValueLength = maxValue.toString().length - 1;

      const baseNumber = Math.pow(10, maxValueLength) / 2;
      return Math.ceil(maxValue / baseNumber) * baseNumber;
    },
    computedRatio(a, b) {
      if (typeof a == "number" && typeof b == "number") {
        return this.toFix((100 * a) / (a + b), 2);
      }
      if (!a) {
        return "-";
      }
      if (!b) {
        return 100;
      }
      return "-";
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.chart-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    width: 100%;
    height: 100%;
  }

  .chart {
    flex: 1;
  }
}
</style>
